{% load i18n iclock_tags static common %}
{% autoescape off %}
  <div id="{{ model_name }}_edit_form" style="padding: 10px; height: 550px">
    <form class="layui-form data-form" action="" method="post" enctype="multipart/form-data">
      {% csrf_token %}
      {% with adminform.form as f %}
        <div class="layui-card">
          <div class="layui-card-header" style="background: #f2f2f2;">{% trans 'employee_basicInformation_setting' %}</div>
          <div class="layui-card-body" style="padding-top: 10px">
            <div class="layui-row">
              <div class="layui-col-md9">
                <div class="layui-form-item">
                  {% layui_inline f.emp_code %}
                  {% layui_inline f.first_name %}
                </div>
                 <div class="layui-form-item {% if not request.user.is_superuser or f.base_fields.company.queryset.count == 1%} layui-hide {% endif %}">
                    {% layui_inline f.company %}
                 </div>
                <div class="layui-form-item">
                  {% layui_inline f.department %}
                  {% layui_inline f.last_name %}
                </div>
                <div class="layui-form-item">
                  {% layui_inline f.position %}
                  {% layui_inline f.area %}
                </div>
                <div class="layui-form-item">
                  {% layui_inline f.emp_type %}
                  {% layui_inline f.hire_date %}
                </div>
              </div>
              <div class="layui-col-md3">
                <div class="layui-upload-drag" id="empPhoto" style="width: 130px;height: 150px;padding: 5px;" title="{% trans 'employee_title_clickToUploadPhoto' %}">
                  <script>
                    function imgerrorfun(type){
                       var img=event.srcElement;
                       img.src="/files/photo/nophoto.gif";
                       img.onerror=null;
                   }
                  </script>
                  <img id="reviewPhoto" src= "" alt="" style="width: 120px;height: 140px;" onerror="imgerrorfun();">
                  <div>{% trans 'employee_title_UploadPhoto' %}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-tab layui-tab-brief" lay-filter="employee_profile_tabs">
          <ul class="layui-tab-title">
            <li lay-id="emp_detail" class="layui-this">{% trans 'employee_moreDetail_setting' %}</li>
            <li lay-id="emp_app">{% trans 'employee_deviceRelate_setting' %}</li>
            {% if not 'ENABLE_WDMS'|get_settings_param %}
              <li lay-id="emp_attendance">{% trans 'employee_attendance_settings' %}</li>
              <li lay-id="emp_certification" class="{% if not f.instance.pk %}layui-hide{% endif %}">{% trans 'employee_document_settings' %}</li>
              <li lay-id="emp_access" class="layui-hide">{% trans 'employee_accessController_settings' %}</li>
              <li lay-id="emp_app">{% trans 'employee_app_setting' %}</li>
              <li lay-id="emp_payroll" class="layui-hide">{% trans 'payroll_setting' %}</li>
              <li lay-id="emp_vacation">{% trans 'employee_vacation_setting' %}</li>
              <li lay-id="emp_payroll">{% trans 'payroll_setting' %}</li>
            {% endif %}
          </ul>
          <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
              <div style="margin-bottom: 5px;">
                {% layui_inline f.ssn %}
                {% layui_inline f.nickname %}
                {% layui_inline f.gender %}
              </div>
              <div style="margin-bottom: 5px;">
                {% layui_inline f.passport %}
                {% layui_inline f.driver_license_automobile %}
                {% layui_inline f.driver_license_motorcycle %}
              </div>
              <div style="margin-bottom: 5px;">
                {% layui_inline f.contact_tel %}
                {% layui_inline f.office_tel %}
                {% layui_inline f.mobile %}
              </div>
              <div style="margin-bottom: 5px;">
                {% layui_inline f.national %}
                {% layui_inline f.religion %}
                {% layui_inline f.city %}
              </div>
              <div style="margin-bottom: 5px;">
                {% layui_inline f.address %}
                {% layui_inline f.postcode %}
                {% layui_inline f.email %}
              </div>
              <div style="margin-bottom: 5px;">
                {% layui_inline f.birthday %}
              </div>
            </div>
            <div class="layui-tab-item">
              <div class="layui-row">
                <div class="layui-col-md9">
                  <div class="layui-form-item">
                    {% layui_inline f.verify_mode %}
                    {% layui_inline f.dev_privilege %}
                  </div>
                  <div class="layui-form-item">
                    {% layui_inline f.card_no %}
                    {% layui_inline f.device_password %}
                  </div>
                  <div class="layui-form-item">
                    {% layui_inline f.enroll_sn %}
                    <div class="layui-inline">
                      <label for="" class="layui-form-label">{% trans "employee_label_fingerprintRegistered" %}</label>
                      <div class="layui-input-inline" style="width: 115px !important;">
                        <input id="fpCount" type="text" class="layui-input" value="{{ f.fp_count.value }}" disabled style="min-width: 110px !important;">
                      </div>
                      <div class="layui-form-mid layui-word-aux">
                        <a id="fpRegister" href="javascript:void(0);" class="layui-btn layui-btn-sm" onclick="submitRegister()">{% trans 'employee_btn_fingerprintEnroll' %}</a>
                      </div>
                      <div class="layui-hide">
                        {{ f.fps }}
                        {{ f.fp_type }}
                        {{ f.templates }}
                        {{ f.dur_fps }}
                        {{ f.del_fps }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="layui-col-md3">
                    <div class="layui-upload-drag" id="bioPhoto" style="width: 130px;height: 150px;padding: 5px;" title="{% trans 'employee_title_clickToUploadBioPhoto' %}">
                    <img id="reviewBioPhoto" src="" alt="" style="width: 120px;height: 140px;" onerror="imgerrorfun('bio');">
                    <div>Bio-Photo</div>
                  </div>
                    <div class="layui-form-mid layui-word-aux">
                        <a id="biophoto_delete" href="javascript:void(0);" class="layui-btn layui-btn-sm" onclick="biophoto_delete()">{% trans 'biophoto_delete' %}</a>
                    </div>

                </div>
              </div>
            </div>
            <div class="layui-tab-item">
              <div class="layui-form-item">
                {% layui_inline f.enable_att %}
                {% layui_inline f.enable_holiday %}
              </div>
              <div class="layui-form-item">
                {% layui_inline f.self_password %}
                {% layui_inline f.flow_role %}
              </div>
            </div>
            <div class="layui-tab-item">
              <table class="layui-hide" id="id_empDocument" lay-filter="empDocument"></table>
            </div>
            <div class="layui-tab-item layui-hide">
              <div style="margin-bottom: 5px;">
                {% layui_inline f.acc_group %}
                {% layui_inline f.acc_timezone %}
              </div>
            </div>
            <div class="layui-tab-item">
              <div class="layui-form-item">
                {% layui_inline f.app_status %}
                {% layui_inline f.app_role %}
              </div>
            </div>
            <div class="layui-tab-item  layui-hide">
              <div class="layui-form-item">
                {% layui_inline f.payment_mode %}
                {% layui_inline f.payment_type %}
              </div>
              <div class="layui-form-item">
                {% layui_inline f.bank_name %}
                {% layui_inline f.bank_account %}
              </div>
              <div class="layui-form-item">
                {% layui_inline f.agent_id %}
                {% layui_inline f.agent_account %}
              </div>
              <div class="layui-form-item">
                {% layui_inline f.personnel_id %}
              </div>
            </div>
            <div class="layui-tab-item">
                 <div class="layui-tab-item layui-hide">
                {% layui_inline f.vacation_rule %}
              </div>
              <div class="layui-form-item">
                 <div class="layui-inline">
                      <label for="" class="layui-form-label">{% trans "employee_label_vacation" %}</label>
                      <div class="layui-input-inline" style="width: 115px !important;">
                        <input id="vacationCount" type="text" class="layui-input" disabled style="min-width: 110px !important;">
                      </div>
                      <div class="layui-form-mid layui-word-aux">
                        <a id="vacationRefresh" href="javascript:void(0);" class="layui-btn layui-btn-sm" onclick="vacationRefresh()">{% trans 'employee_btn_vacationRefresh' %}</a>
                      </div>
                    </div>
                  </div>
                <div class="layui-inline">
                      <label for="" class="layui-form-label">{% trans "employee_label_vacationLeft" %}</label>
                      <div class="layui-input-inline" style="width: 115px !important;">
                        <input id="vacationleft" type="text" class="layui-input" disabled style="min-width: 110px !important;">
                      </div>
                  </div>
                 <div class="layui-inline">
                     <label class="layui-form-label">{% trans 'employee_label_vacationtime' %}</label>
                    <div class="layui-input-inline" id="vacation_rule_div">
                        <input type="text" id="id_vacation_rule" name="vacation_rule" class="layui-input">
                    </div>
                  </div>
            </div>
            <div class="layui-tab-item">
              <div class="layui-form-item">
                {% layui_inline f.national_num %}
                {% layui_inline f.payroll_num %}
              </div>
              <div class="layui-form-item">
                {% layui_inline f.internal_emp_num %}
              </div>
            </div>
          </div>
        </div>
      {% endwith %}
    </form>
  </div>
  <script>
    layui.use(['element', 'layer', 'laydate', 'form', 'upload'], function () {
      var element = layui.element,
        laydate = layui.laydate,
        form = layui.form,
        upload = layui.upload;
      form.render();
      element.render();
      laydate.render();
      upload.render({
          elem: "#empPhoto"
          //,url: ''
          ,auto: false
          ,field: "photo"
          ,exts: "gif|jpg"
          ,choose: function(obj){
            obj.preview(function(index, file, result){
              $('#reviewPhoto').attr('src', result); //图片链接（base64）
            });
          }
          ,error: function(index, upload){

          }
      });
      upload.render({
          elem: "#bioPhoto"
          //,url: ''
          ,auto: false
          ,field: "bio_photo"
          ,exts: "gif|jpg"
          ,choose: function(obj){
            obj.preview(function(index, file, result){
              $('#reviewBioPhoto').attr('src', result); //图片链接（base64）
              if ('{{ adminform.form.approval_state }}'!='3'){
                layer.msg(gettext('Bio-Photo pending approval in Device > Data > Bio-Photo'));
              }
            });
          }
          ,error: function(index, upload){

          }
      });
      $("form.layui-form input.layui-date").each(function () {
        var laydate = layui.laydate;
        laydate.render({
          elem: this,
          type: 'date'
        });
      });
      //$("#id_emp_code").change(function(){
      //    alert($(this).val());
      //});
      if("{{ add }}"=='True')  {
        refresh_vacationrules({{ adminform.form.initial.company_id }});
      }else{
          refresh_vacationrules({{ adminform.form.initial.company }});
      }
      function refresh_vacationrules(company) {
        var urlDept = '/att/api/vacationtime/?company=' + company;
        $.ajax({
            url: urlDept
            , type: "GET"
            , dataType: "json"
            , success: function (response, xhr) {
                var vacation_rule_data = response.data;
                var vacation_rule_data_show = new Array()
                for (var i = 0; i < vacation_rule_data.length; i++) {
                    if ('{{ adminform.form.instance.vacation_rule }}'!='None' && vacation_rule_data[i].id == {{ adminform.form.instance.vacation_rule }}) {
                        vacation_rule_data_show[i] = {
                            "id": vacation_rule_data[i].id,
                            "name": vacation_rule_data[i].category_name,
                            "checked": true
                        };
                    } else {
                        vacation_rule_data_show[i] = {"id": vacation_rule_data[i].id, "name": vacation_rule_data[i].category_name};
                    }
                }
                 $("#vacation_rule_div").empty();
                var timestamp = Date.parse(new Date());
                $("#vacation_rule_div").append("<div id=" + "vacation_rule" + timestamp + " class='layui-form-select tree-select'></div>");
                $("#vacation_rule" + timestamp + "").zTreeSelect({
                      model: 'Employee',
                            name: 'vacation_rule',
                    stamp: timestamp,
                    input_type: "radio",
                    data: vacation_rule_data_show
                });
                form.render('select');
                form.render();
            }
            , error: function (xhr, error, e) {
            }
        });
    }

    });
  </script>
  {% block add_contents %}
    <script src="{% static "/js/jquery/jquery.tools.min.js" %}"></script>
    <script src="{% static "/js/jquery/jquery.plus.js" %}"></script>
    <script src="{% static "/js/jquery/jquery.zcommon.js" %}"></script>
    <script src="{% static "/js/baseISSObject.min.js" %}"></script>
    <script src="{% static "/js/baseFPRegister.js" %}"></script>
    <script src="{% static "/js/empFPRegister.js" %}"></script>
  {% endblock %}
  <script type="text/html" id="toolbarHead">
  <div class="layui-btn-container">
    <a class="layui-btn layui-btn-sm" lay-event="add">{% trans "common_action_new" %}</a>
  </div>
  </script>
  <script type="text/html" id="toolbarRow">
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="fa fa-fw fa-pencil-square-o"></i></a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="fa fa-fw fa-trash-o"></i></a>
  </script>
  <script type="text/html" id="file_name">
     {% verbatim %} {{#  if(d.file_name){ }}{% endverbatim %}
          <a href="/files/document/{% verbatim %}{{d.file_name}}{% endverbatim %}" class="layui-table-link" target="_blank">{% verbatim %} {{d.file_name}}{% endverbatim %}</a>
      {% verbatim %}{{#  } }}{% endverbatim %}

    </script>
  <script>
    $(document).ready(function () {
        var photo_url = "/files/photo/{{ adminform.form.instance.emp_code }}.jpg?r="+Math.random();
        var biophoto_url = "/files/biophoto/{{ adminform.form.instance.emp_code }}.jpg?r="+Math.random();
        $('#reviewPhoto').attr('src', photo_url);
        $('#reviewBioPhoto').attr('src', biophoto_url);
      layui.use('table', function () {
        var table = layui.table;
        var tb = table.render({
          elem: '#id_empDocument'
          ,method: 'GET'
          ,url: '/personnel/api/employeecertifications/?employee_id={{ adminform.form.instance.pk }}'
          ,toolbar: '#toolbarHead'
          ,defaultToolbar: []
          ,title: 'table'
          ,height: 220
          ,cols: [[ //title
            {field: 'id', sort: true, hide: true}
            , {field: 'cert_name', title: '{% trans 'employeeCert_field_cert'%}'}
            , {field: 'expire_on', title: '{% trans 'employeeCert_field_expireOn'%}'}
            , {field: 'email_alert', title: '{% trans 'employeeCert_field_emailAlert'%}', edit: 'text'}
            , {field: 'before', title: '{% trans 'employeeCert_field_before'%}', edit: 'text'}
            , {field: 'file_name', title: '{% trans 'employeeCert_field_fileName'%}',templet: '#file_name'}
            , {toolbar: '#toolbarRow'}
          ]]
          ,data: [{id: '', cert_name: '', expire_on: '', email_alert: '', before: ''}]
          ,page: false
          ,text: {
            none: gettext('none_data')
          }
        });
        var upload_doc = function(url){
            $.ajax({
                url: url
                ,type: "GET"
                ,dataType: "html"
                ,success: function (page) {
                    layer.open({
                        title: " "
                        ,content: page
                        ,btn: [gettext('btn_confirm'), gettext('btn_cancel')]
                        ,yes: function (index, layero) {
                            console.log(222)
                            var data = new FormData($(layero).find('.layui-form')[0]);
                            var file = $(layero).find("#id_file")[0].files[0];
                            data.append("file", file);
                            $.ajax({
                                url: '/personnel/update_document/'
                                ,type: 'POST'
                                ,data:data
                                ,contentType: false
                                ,processData: false
                                ,success: function(response){
                                    response = $.parseJSON(response)
                                    if(response['code'] == 0){
                                        layer.msg(gettext('action_post_successful'));
                                        tb.reload();
                                    }else{
                                        console.log(response['msg'])
                                        layer.msg(gettext(response['msg']));
                                    }
                                }
                            });
                        }
                    })
                }
            })
        };
        table.on('toolbar(empDocument)', function (obj) {
            if (obj.event === 'add') {
                var url= '/personnel/update_document/?emp={{ adminform.form.instance.pk }}';
                upload_doc(url);
            }
        });
        table.on('tool(empDocument)', function (obj) {
          var data = obj.data;
          if (obj.event === 'del') {
            layer.confirm('{% trans 'are_you_sure_to_delete_the_selected_document' %}', {
                  title:'Prompt',
                  btn: [gettext('btn_confirm'), gettext('btn_cancel')]
                }, function (index) {
                  $.ajax({
                      url: '/personnel/remove_document/?_id='+data['id']
                      ,type: "GET"
                      ,dataType: "json"
                      ,success: function (response) {
                          layer.close(index);
                          tb.reload();
                      }
                  });
                }
            );
          }else if(obj.event === 'edit'){
            var url= '/personnel/update_document/?emp={{ adminform.form.instance.pk }}&&_id='+data['id'];
            upload_doc(url);
          }
        });
      });
      {% if adminform.form.instance.pk %}
          vacationRefresh();
      {% endif %}
    });
    /**
     * 删除图片
     */
    var pk = '{{ adminform.form.instance.pk }}';
    if (pk === 'None'){
        $('#biophoto_delete').addClass('hide');
     }
    function biophoto_delete() {
        $.ajax({
              url: "/personnel/biophoto_delete/?emp={{ adminform.form.instance.pk }}"
              ,type: "GET"
              ,dataType: "json"
              ,success: function (response) {
                   layer.msg(gettext('action_post_successful'));
                   $('#reviewBioPhoto').attr('src', "/files/photo/nophoto.gif"); //图片链接（base64）
                   $('#biophoto_delete').hide();
              }
          });
    }
    /**
     * 刷新vacation
     */
    function vacationRefresh() {
        $.ajax({
              url: "/personnel/vacation_refresh/?emp={{ adminform.form.instance.pk }}&vacation_rule={{ adminform.form.instance.vacation_rule }}"
              ,type: "GET"
              ,contentType: false
              ,processData: false
              ,success: function (response) {
                  response = $.parseJSON(response)
                    if(response['code'] == 0){
                        $('#vacationCount').val(response['vacation_days'])
                        $('#vacationleft').val(response['vacation_left'])
                    }
              }
          });
    }
  </script>
{% endautoescape %}